<template>
  <div class="ck">
    <div class="header">
      <ul>
        <li><div class="head-font"></div></li>
        <li><p>&nbsp; 机构管理</p></li>
      </ul>
    </div>

    <div class="state">
      <el-form>
        <el-col>
          <el-input
            placeholder="请输入关键字"
            style="width: 400px"
            suffix-icon="el-icon-search"
            v-model="list.organizationName"
          ></el-input>
          <el-button
            style="
              margin-left: 500px;
              border: 1px solid #0066ff;
              color: #0066ff;
            "
            @click="search"
            >搜索</el-button
          >
         
        </el-col>
      </el-form>
    </div>

    <el-table
      style="width: 1250px; margin-top: 70px"
      :header-cell-style="{ background: 'silver', color: '#606266' }"
      :data="list.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
    >
      <el-table-column width="25"> </el-table-column>
      <el-table-column type="selection" width="75"></el-table-column>
      <el-table-column
        label="编号"
        width="80px"
        prop="organizationId"
      ></el-table-column>
      <el-table-column label="机构图片" width="100px" prop="organizationImg">
        <template slot-scope="scope">
          <img :src="scope.row.organizationImg" min-width="70" height="70" />
        </template>
      </el-table-column>
      <el-table-column label="机构名称" width="200px" prop="organizationName">
        <template slot-scope="list">
          <p v-html="list.row.organizationName"></p>
        </template>
      </el-table-column>
      <el-table-column
        label="负责人姓名"
        width="100px"
        prop="principal"
      ></el-table-column>
      <el-table-column
        label="电话"
        width="130px"
        prop="organizationPhone"
      ></el-table-column>
      <el-table-column
        label="机构地址"
        width="200px"
        prop="organizationAddress"
      ></el-table-column>
      <el-table-column
        label="状态"
        width="200px"
        prop="organizationState"
        align="center"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.organizationState"
            class="demo"
            :active-value="1"
            :inactive-value="2"
            active-color="#13ce66"
            active-text="启用"
            inactive-color="#CCCCCC"
            inactive-text="禁用"
            @change="changeState($event, scope.row.organizationId)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140">
        <template slot-scope="scope">
          <el-button
            @click="deleteRow(scope.row.organizationId)"
            type="danger"
            icon="el-icon-delete"
            size="small"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2, 4, 6, 8, 10]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top: 20px; margin-left: 150px"
      :total="list.length"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      list: [],
      currentPage: 1, //初始页
      pagesize: 2, //每页条数
    };
  },

  created() {
    this.findList();
  },

  methods: {
    findList() {
      axios({
        url: "/api/organization/findEsList",
      }).then((res) => {
        console.log(res);
        this.list = res.data.data;
      });
    },
    handleSizeChange(size) {
      console.log(size, "size");
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange(currentPage) {
      console.log(currentPage, "currentPage");
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
    search() {
      axios({
        url: "/api/organization/findEsList",
        params: {
          organizationName: this.list.organizationName,
        },
      }).then((res) => {
        console.log(res);
        this.list = res.data.data;
      });
    },
    deleteRow(id) {
      console.log(id); //e是html页面中传递过来本条数据的id
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          let that = this; //改变this指向
          axios
            .get("/api/organization/deleteOrganizationById", {
              params: {
                id: id,
              },
            })
            .then(function (res) {
              //判断success是否为true
              if (res.succeed === false) {
                that.$message({
                  type: "info",
                  message: "删除失败!",
                });
              } else {
                that.$message({
                  type: "success",
                  message: "删除成功!",
                });

                location.reload();
                this.$options.created.findList();
              }
            })
            .catch(function (reason) {
              console.log(reason);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //点击修改状态
    changeState($event, id) {
      console.log(id);
      // alert($event)
      if ($event == 2) {
        //禁用
        this.$confirm("确认禁用吗？", "操作确认", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        this.$axios({
          url: "api/organization/changeState",
          mounted: "GET",
          params: {
            organizationId: id,
            organizationState: 2,
          },
        });
      } else {
        //启用
        this.$confirm("确认启用吗？", "操作确认", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        this.$axios({
          url: "api/organization/changeState",
          mounted: "GET",
          params: {
            organizationId: id,
            organizationState: 1,
          },
        });
      }
    },
  },

  created() {
    this.findList();
  },
};
</script>

<style>
.ck {
  width: 1250px;
  height: 980px;
}
.header ul {
  width: 1250px;
  height: 50px;
  background-color: #f2f7fb;
  display: flex;
  padding-top: 20px;
  padding-left: 30px;
}
.header ul p {
  font-size: 22px;
}
.head-font {
  background-color: #0066ff;
  width: 7px;
  height: 25px;
  border-radius: 10px;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
.state {
  margin-top: 15px;
}
.demo .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
/*打开时文字位置设置*/
.demo .el-switch__label--right {
  z-index: 1;
  right: 6px;
}
/*关闭时文字位置设置*/
.demo .el-switch__label--left {
  z-index: 1;
  left: 6px;
}
/*显示文字*/
.demo .el-switch__label.is-active {
  display: block;
}
.demo.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 52px !important;
}
</style>